{{template "admin/header.html"}}
<title>{{T "Login"}} - MINRAG</title>
<script type="text/javascript" src="{{basePath}}admin/js/sha3.min.js"></script>
<style>
	.minrag-login-container {
		padding: 0 20px;
		width: 456px;
		height: auto;
		/* 定位方式 */
		position: absolute;
		/* 距顶部的百分比值，表示向下移动自身高度的一半 */
		top: 45%;
		/* 距左侧的百分比值，表示向右移动自身宽度的一半 */
		left: 50%;
		/* 通过变换函数将其自身的尺寸的一半作为参数传入，从而达到居中效果 */
		transform: translate(-50%, -50%);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		background: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.5)
	}

	.login_logo {
		margin: -55px auto 20px;
		width: 100px;
		height: 100px;
		background: #fff;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		border: 5px solid #fff;
		overflow: hidden;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}

	.login_logo img {
		width: 100%;
	}

	.minrag-login-other {
		padding: 0;
		width: 100%;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.minrag-login-other a {
		margin-right: 12px;
		margin-left: 12px;
		text-decoration: underline;
	}
</style>
</head>

<body>
	<div class="minrag-login-container">
		<input type="hidden" id="message" value="{{.message}}">
		<div class="login_logo"><img src="{{basePath}}public/logo.png"></div>
		<div><h2 class="minrag-login-other">{{T "Login"}}</h2></div>
		<form class="layui-form" action="{{basePath}}admin/login" method="post">
			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-username"></i>
					</div>
					<input type="text" name="account" value="" lay-verify="required" placeholder='{{T "Account"}}'
						lay-reqtext='{{T "Please fill in the account"}}' autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-password"></i>
					</div>
					<input type="password" id="password" name="password" value="" lay-verify="required"
						placeholder='{{T "Password"}}' lay-reqtext='{{T "Please fill in the password"}}' autocomplete="off" class="layui-input" lay-affix="eye">
				</div>
			</div>

			{{ if .showCaptcha }}
			<div class="layui-form-item">
				<div class="layui-input-wrap" style="display: flex;justify-document: space-between;align-items: center;">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-vercode"></i>
					</div>
					<input type="text" name="answer" value="" lay-verify="required" placeholder='{{T "CAPTCHA"}}' lay-reqtext='{{T "Please fill in the CAPTCHA"}}'
						autocomplete="off" class="layui-input">
						&nbsp; <img height="38px" src="{{ safeURL .captchaBase64 }}" />
				</div>
			</div>
			{{ end }}

			<div class="layui-form-item">
				<button class="layui-btn layui-btn-fluid  layui-bg-blue" lay-submit
					lay-filter="minrag-login">{{T "Login"}}</button>
			</div>
		</form>
		<div class="minrag-login-other">
			<a href="javascript:retrievepassword();">{{T "Forgot password"}}</a>
			<a href="https://gitee.com/minrag/minrag" target="_blank">{{T "Contact us"}}</a>
		</div>
	</div>
	<script>
		var layer;
		layui.use(function () {
			var form = layui.form;
			layer = layui.layer;
			//消息提示
			let msg = document.getElementById('message').value;
			if (msg) {
				layer.msg(msg);
			}else{
				const query = window.location.search;
				const params = new URLSearchParams(query)
				var message = params.get("message")
				if (message && message != "") {
					layer.msg(msg);
				}
			}
			// 提交事件
			form.on('submit(minrag-login)', function (data) {
				document.getElementById('password').value = sha3_512(document.getElementById('password').value);
				return true; // 提交form
			});


		});

		// 忘记密码
		function retrievepassword(){
			layer.alert('{{T "1. Rename minragdatadir/template/install.html.bak to install.html </br> 2. Settings updated successfully, restart MINRAG to take effect!, reinitialize administrator account and password, data will not be lost"}}',{title:'{{T "Forgot password"}}'});
		}
	</script>

</body>

</html>